import React, { Component } from 'react';
import ReactQuill, { Quill } from 'react-quill';

import { ImageDrop } from 'quill-image-drop-module';
// import 'quill/dist/quill.snow.css';
import IceContainer from '@icedesign/container';
import 'react-quill/dist/quill.snow.css';
import { Editor, EditorState } from 'draft-js';
// import Editor from 'react-umeditor';
// import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { Link } from 'react-router-dom';
import { Input, Grid, Form, Button, Select, Feedback } from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import axios from 'axios'
const { Row, Col } = Grid;
const FormItem = Form.Item;

Quill.register('modules/imageDrop', ImageDrop);
export default class AblityItems extends Component {
  static displayName = 'QuillRichTextEditor';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      value: '',
      values: {
        atype: '',
        acontent: '',
        aname: '',
      },
    };

    this.editor = null;

  }
  componentDidMount() {
    const textbox = this.refs.textarea;
    const options = {
      debug: 'warn',
      modules: {
        toolbar: true
      },
      placeholder: '请输入文本...',
      readOnly: false,
      theme: 'snow'
    };
  }
  handleChange() {
    let { value } = this.state;
    value = this.editor.root.innerHTML;
    this.setState({ value });
  }
  handleSubmit = () => {
    this.postForm.validateAll((errors, values) => {

      if (errors) {
        return false;
      }
      axios.post(' http://zzuisa.cn/reader/article/add', values)
        .then((res) => {
          if (res.data.code === 0) {
            Feedback.toast.success('发布成功，等待管理员审核!');
            this.props.history.push('/article')
          }
          else {
            Feedback.toast.error(res.data.message)
            this.props.history.push('/login')
          }
        })

      // ajax values
    });
  };
  formChange = (values) => {
    console.log('values', values);
    this.setState({
      values,
    });
  };
  render() {
    console.log('this', this)
    return (
      <IceFormBinderWrapper
        ref={(refInstance) => {
          this.postForm = refInstance;
        }}
        value={this.state.values}
        onChange={this.formChange}
      >
        <IceContainer>
          <h2 style={styles.title}>添加文章</h2>
          <Form labelAlign="top" style={styles.form}>
            <Row>
              <Col span="11">
                <FormItem label="标题" required>
                  <IceFormBinder name="aname" required message="标题必填">
                    <Input placeholder="这里填写文章标题" />
                  </IceFormBinder>
                  <IceFormError
                    name="aname"
                    render={(errors) => {
                      console.log('errors', errors);
                      return (
                        <div>
                          {/* <span style={{ color: 'red' }}>
                            {errors.map(item => item.message).join(',')}
                          </span> */}
                          <span style={{ marginLeft: 10 }}>
                            标题必须填啊！
                            </span>
                        </div>
                      );
                    }}
                  />
                </FormItem>
              </Col>
              <Col span="11" offset="2">
                <FormItem label="分类" required>
                  <IceFormBinder
                    name="atype"
                    required
                    type="number"
                    message="分类必填"
                  >
                    <Select
                      style={styles.cats}
                      placeholder="请选择分类"
                      dataSource={[
                        { label: '科普', value: 1 },
                        { label: '情感', value: 2 },
                        { label: '生活', value: 3 },
                      ]}
                    />
                  </IceFormBinder>
                  <IceFormError
                    name="atype"
                    render={(errors) => {
                      console.log('errors', errors);
                      return (
                        <div>
                          {/* <span style={{ color: 'red' }}>
                            {errors.map(item => item.message).join(',')}
                          </span> */}
                          <span style={{ marginLeft: 10 }}>
                            不知道选择什么分类？请 <a href="#">点击这里</a>{' '}
                            查看
                            </span>
                        </div>
                      );
                    }}
                  />
                </FormItem>
              </Col>
            </Row>
            <FormItem label="正文" required>
              <IceFormBinder name="acontent">
                <ReactQuill
                  theme="snow"
                  style={{ height: '350px' }}
                  value={this.state.value}

                  modules={{
                    toolbar: [
                      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
                      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
                      ['link', 'image'],
                      ['clean'],
                    ],
                    imageDrop: true,
                  }}
                // onChange={(val) => {
                //   this.setState({
                //     value: val
                //   })
                // }}  这里如果直接使用 这种回调的方式 会直接丢失富文本框焦点. 原因不详
                />
              </IceFormBinder>
              <IceFormError
                name="acontent"
                render={(errors) => {
                  console.log('errors', errors);
                  return (
                    <div>
                      {/* <span style={{ color: 'red' }}>
                            {errors.map(item => item.message).join(',')}
                          </span> */}
                      <span style={{ marginLeft: 10 }}>
                        写点什么呢?
                            </span>
                    </div>
                  );
                }}
              />
            </FormItem>
            <FormItem label=" ">
              <Button type="primary" onClick={this.handleSubmit}>
                发布文章
                </Button>
            </FormItem>
          </Form>
        </IceContainer>
      </IceFormBinderWrapper>
    );
  }
}


const styles = {
  title: {
    margin: '0px 0px 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
  },
  form: {
    marginTop: 30,
  },
  cats: {
    width: '100%',
  },
};
